/** 软件模块使用历史部件
 * Author:      huoxj
 * CreateTime:  2023/2/5 20:36:33
 * LastEditor:  huoxj
 * ModifyTime:  2023/12/5 19:31:01
 * Description:
*/
<template>
  <div ref="echarsRef" :style="{ width: props.width, height: props.height }"> </div>
  <a-modal :visible="dialogVisible"
    wrapClassName="full-modal"
    width="100vw" height="100vh" @ok="handleOk" @cancel="handleCancel()">
    <template #closeIcon>
      <CloseOutlined style="color:white"/>
    </template>
    <div ref="echarsDialog" style="width: 100%; height: 100%;top:0;left:0; "></div>
  </a-modal>

  <el-config-provider :locale="zhCn">
    <el-dialog v-model="propertySettingVisible" width="400px" height="300px" @ok="handlePropertySettingOk" :title="'软件模块查询'">
      <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row>
          <a-col :span="24">
            <a-form-item label="软件名称">

              {{props.software}}
              <!--            <el-select v-model="propertySettingParams.software" placeholder="请选择">-->
              <!--              <el-option v-for="item in softwareOptions" :key="item.value" :label="item.label" :value="item.value" />-->
              <!--            </el-select>-->
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="软件模块">

              <el-select v-model="propertySettingParams.module" placeholder="请选择">
                <el-option v-for="item in moduleOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="起始日期">
              <el-date-picker
                style="width: 100%"
                v-model="propertySettingParams.startDate"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请输入起始日期"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="截止日期">
              <el-date-picker
                style="width: 100%"
                v-model="propertySettingParams.endDate"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择截止日期"
              />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
    </el-dialog>
  </el-config-provider>
</template>
<script setup lang="ts">
  import { ref, Ref, reactive, watchEffect, onMounted, watch, nextTick } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import {defHttp} from "/@/utils/http/axios";
  import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
  import { CloseOutlined } from '@ant-design/icons-vue';
  const props = defineProps(['width', 'height', 'software','softwareId']);
  const propertySettingParams = ref<any>({ software: '', module: '', startDate: '', endDate: '',moduleId: '' });
  const echarsRef = ref<HTMLDivElement | null>(null);

  const { setOptions, echarts, getInstance } = useECharts(echarsRef as Ref<HTMLDivElement>, 'dark');
  const option = reactive({});
  const module = ref(''); //模块

  function initCharts() {
    Object.assign(
      option,
      reactive({
        toolbox: {
          feature: {
            myTool1: {
              show: true,
              title: '选择模块',
              icon: 'M449.1 732.9c-77.8 0-151-30.3-206-85.3s-85.3-128.2-85.3-206 30.3-151 85.3-206 128.2-85.3 206-85.3c77.8 0 151 30.3 206 85.3s85.3 128.2 85.3 206-30.3 151-85.3 206-128.2 85.3-206 85.3z m0-532.7c-133.1 0-241.4 108.3-241.4 241.4S316 682.9 449.1 682.9c133.1 0 241.4-108.3 241.4-241.4S582.2 200.2 449.1 200.2z M609.135 636.88l35.355-35.355L875.853 832.89l-35.355 35.355z',
              onclick: function () {
                showPropertySettingDialog();
              },
            },
            myTool2: {
              show: true,
              title: '点击全屏',
              icon: 'M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z',
              onclick: function () {
                /** 打开对话框
                * Author:      yangjq
                * CreateTime:  2023/12/5 19:40:58
                * LastEditor:  yangjq
                * ModifyTime:  2023/12/5 19:40:58
                * Description:
                */
                openDialog();
              },
            },
          },
          top: '3%',
          right: '5%',
        },

        title: {
          show: true,
          text: '{h|' + props.software + '}{n|软件}{b|' + module.value + '}{n|模块使用情况}',
          textVerticalAlign: 'top',
          left: 'center',
          top: 16,
          textStyle: {
            overflow: 'truncate',
            ellipsis: '...',
            rich: {
              n: {
                color: 'rgba(255, 255, 255, 1)',
                fontSize: 17,
                textBorderWidth: '1',
              },
              h: {
                color: 'rgba(255, 0, 0, 1)',
                fontSize: 17,
                fontWeight: 'bold',
              },
              b: {
                color: 'rgba(0, 0, 255, 1)',
                fontSize: 17,
                fontWeight: 'bold',
              },
            },
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          bottom: '20px',
          type: 'scroll',
          textStyle: {
            fontWeight: 700,
            fontSize: 12,
            color: '#ffffff'
          },
        },
        backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
        // grid: {
        //   containLabel: true,
        //   left: 'center',
        //   top: 'center',
        //   width: '84%',
        //   height: '70%',
        // },
        yAxis: {
          type: 'value',
          name: '数量',
          nameLocation: 'center',
          nameGap: 20,
          nameRotate: 90,
          splitLine: { show: false },
          splitArea: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff',
            },
          },
          nameTextStyle: {
            fontWeight: 700,
            fontSize: 12,
            color: '#ffffff'
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            //x轴刻度相关设置
            alignWithLabel: true,
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff',
            },
          },
          nameTextStyle: {
            fontWeight: 700,
            fontSize: 12,
            color: '#ffffff'
          },
          data: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07','2023-08','2023-09','2023-10','2023-11','2023-12'],
        },
        series: [
          {
            name: '北京',
            type: 'line',
            stack: 'total',
            emphasis: {
              focus: 'series',
            },
            areaStyle: {},
            data: [0, 5, 6, 2, 4, 8, 9, 5 , 4 , 6 ,4 ,0]
          },
          {
            name: '天津',
            type: 'line',
            stack: 'total',
            emphasis: {
              focus: 'series',
            },
            areaStyle: {},
            data: [0, 2, 8, 1, 1, 4, 3,7,3 ,9 ,4 ,0]
          },
          {
            name: '上海',
            type: 'line',
            stack: 'total',
            emphasis: {
              focus: 'series',
            },
            areaStyle: {},
            data: [0, 4, 3, 5, 2, 2, 6,2 ,1 ,4 , 3,0]
          },
          {
            name: '深圳',
            type: 'line',
            stack: 'total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [0, 7, 4, 2, 6, 5, 7,4 ,3 ,7 , 4,0]
          },
          {
            name: '湛江',
            type: 'line',
            stack: 'total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [0, 2, 6, 3, 3, 1, 3,6 ,2 , 1, 2 ,0  ]
          },
          {
            name: '国际',
            type: 'line',
            stack: 'total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [0, 2, 6, 3, 3, 1, 3,6 ,2 , 1, 2 ,0  ]
          },
          {
            name: '非常规油气',
            type: 'line',
            stack: 'total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [0, 2, 6, 3, 3, 1, 3,6 ,2 , 1, 2 ,0  ]
          },
          {
            name: '其他',
            type: 'line',
            stack: 'total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [0, 2, 6, 3, 3, 1, 3,6 ,2 , 1, 2 ,0  ]
          },
          {
            name: '海油发展',
            type: 'line',
            stack: 'total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [0, 2, 6, 3, 3, 1, 3,6 ,2 , 1, 2 ,0  ]
          },
          {
            name: '购买数',
            type: 'line',
            data: [0, 2, 6, 3, 3, 1, 3,6 ,2 , 1, 2 ,0  ]
          },
        ],
      })
    );
    setOptions(option,false);
    let instance = getInstance();
    instance?.on('click', function (param) {
      // console.log(param);
      propertySettingVisible.value = true;
    });
  }

  function loadChartsData() {

    let params = {
      softwareName: props.software,
      softwareId: props.softwareId,
      moduleName: propertySettingParams.value.module,
      moduleId: propertySettingParams.value.moduleId,
      startDate: propertySettingParams.value.startDate,
      endDate: propertySettingParams.value.endDate,
    }
    defHttp.get({url: "/software/softUsage", params}, {isTransformResponse: false}).then((res) => {
      if (res.success) {
        let opt = {
          title: {
            show: true,
            text: '{h|' + props.software + '}{n|软件}{b|' + module.value + '}{n|模块使用情况}',
            textVerticalAlign: 'top',
            left: 'center',
            top: 16,
            textStyle: {
              overflow: 'truncate',
              ellipsis: '...',
              rich: {
                n: {
                  color: 'rgba(255, 255, 255, 1)',
                  fontSize: 17,
                  textBorderWidth: '1',
                },
                h: {
                  color: 'rgba(255, 0, 0, 1)',
                  fontSize: 17,
                  fontWeight: 'bold',
                },
                b: {
                  color: 'rgba(0, 0, 255, 1)',
                  fontSize: 17,
                  fontWeight: 'bold',
                },
              },
            },
          },
          xAxis: {
            data: res.result.modelList,
          },
          series: [
            {
              name: '北京',
              type: 'line',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              areaStyle: {},
              data: res.result.bjList,
            },
            {
              name: '天津',
              type: 'line',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              areaStyle: {},
              data: res.result.tjList,
            },
            {
              name: '上海',
              type: 'line',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              areaStyle: {},
              data: res.result.shList,
            },
            {
              name: '深圳',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: res.result.szList,
            },
            {
              name: '湛江',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: res.result.zjList,
            },
            {
              name: '国际',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: res.result.gjList,
            },
            {
              name: '非常规油气',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: res.result.fcgyqList,
            },
            {
              name: '其他',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: res.result.qtList,
            },
            {
              name: '海油发展',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: res.result.hyfzList,
            },
            {
              name: '购买数',
              type: 'line',
              data: res.result.buyList,
            },
          ],
        };
        Object.assign(option, reactive(opt));
        setOptions(option,false);
      }
    });
  }

  const dialogVisible = ref<boolean>(false);

  /**
   * 取消事件
   * Author:      yangjq
  */
  function handleCancel() {
    dialogVisible.value = false;
  }

  /**
 * 取消事件
 * @author:      yangjq
*/
function handleOk() {
    dialogVisible.value = false;
  }

  /** 打开对话框
  * Author:      yangjq
  * CreateTime:  2023/12/5 19:40:58
  * LastEditor:  yangjq
  * ModifyTime:  2023/12/5 19:40:58
  * Description:
  */
  function openDialog() {
    let opt = Object.assign(option,reactive({toolbox:{}}));
    setOptions2(opt,false);
    dialogVisible.value = true;
  }

  function resize() {
    // nextTick(()=>{
    //   getInstance()?.resize()
    // })
    getInstanceDialog()?.resize();
  }

  //==================================================================================================================
  //软件模块查询条件区域--begin
  const propertySettingVisible = ref<boolean>(false);
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 19 } });
  const softwareOptions = [
    { label: '软件1', value: 'S01' },
    {
      label: '软件2',
      value: 'S02',
    },
    { label: '软件3', value: 'S03' },
  ];
  const moduleOptions = ref([
  ]);

  function showPropertySettingDialog() {
    propertySettingVisible.value = true;
  }

  function handlePropertySettingOk() {
    propertySettingVisible.value = false;
    //执行数据查询
  }

  function handleSoftwareChange() {}

  function clearSelect(){
    // module.value = '';
    // moduleOptions.value = [];
  }

  function searchQuery(){

    propertySettingVisible.value = false;

    loadChartsData();
  }

  function initModule(){
    let params = {
      softwareName: props.software,
    }
    defHttp.get({url: "/software/softModule", params}, {isTransformResponse: false}).then((res) => {
      if (res.success) {
        if (res.result.length >0) {
          module.value = res.result[0].licensename
          propertySettingParams.value.module = res.result[0].licensename
          propertySettingParams.value.moduleId = res.result[0].id
          let arr = [];
          for (let i = 0; i < res.result.length; i++) {
            var data = {label: res.result[i].licensename, value: res.result[i].licensename};
            arr.push(data)
          }
          moduleOptions.value = arr;
          console.log(moduleOptions.value)
        }
      }
    })
  }

  //软件模块查询条件区域--end
  //==================================================================================================================

  const echarsDialog = ref<HTMLDivElement | null>(null);

  const { setOptions: setOptions2, getInstance: getInstanceDialog } = useECharts(echarsDialog as Ref<HTMLDivElement>, 'dark');
  watchEffect(() => {
    if (props.software){
      clearSelect();
      initModule();
      loadChartsData()
    }

  });
  onMounted(() => {
    initCharts();
  });
  /**
   *监听software
   */
  // watch(
  //   () => props.software,
  //   () => {
  //
  //     props.software && initCharts();
  //   }
  // );
</script>

<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      background: url('/admin/bg.png');
      background-size: 100% auto;
      overflow: hidden;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
      background: transparent;
    }
    .ant-modal-body {
      flex: 1;
    }
  }
</style>
